<template>
  <div style="min-height: 100%" v-loading="homeLoading">
    <!-- 无数据展示 页面 -->

    <!-- {{ moduleType }} -->
    <template v-if="!chatDataItem.length">
      <div v-if="moduleType === 'CHAT'">
        <div
          style="padding: 60px 10px 10px; display: flex; align-items: center"
        >
          <div>
            <img src="../../image/Group.png" />
          </div>
          <div style="margin-left: 20px">
            <div style="color: black; font-size: 28px; font-weight: 700">
              你的超级助手已上线！
            </div>
            <div style="color: rgba(0, 0, 0, 0.3)">{{ textName }}</div>
          </div>
        </div>
        <div class="home_tabs">
          <div
            v-for="item in functionData"
            @click="funCut(item)"
            :key="item.type"
            :style="{ width: widthSizeType === 'min' ? '45%' : '23%' }"
            class="home_tabs_item"
          >
            <i :class="item.icon" class="item_icon"></i>
            <div>
              <div class="item_name">{{ item.name }}</div>
              <div class="item_content">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>
      <div style="padding-top: 60px" v-else-if="moduleType === 'DOC'">
        <div class="sum">
          <div class="dox_sum">
            <div style="display: flex; align-items: center">
              <i class="el-icon-user" style="color: blue; font-size: 26px"></i>
              <div
                style="
                  color: black;
                  font-size: 22px;
                  margin-left: 10px;
                  font-weight: 700;
                "
              >
                文档总结
              </div>
            </div>
            <div class="sum_text">
              速读各类文章，迅速了解摘要和洞察。(支持文件类型:
              .doc,.docx,.ppt,.pptx,.xls,.xlsx,.pdf,.txt,.html,.htm,.md,.epub,.csv,.mobi,.png,.jpg,.jpeg)
            </div>
          </div>
          <div class="dox_tent">
            <div class="tent_title">你可以试试这样问我与我对话</div>
            <div class="tent_tabs">
              <div
                v-for="item in documentSummaryData"
                :key="item.title"
                @click="changeSuggestFile(item)"
                class="tent_tabs_item"
              >
                <div @click.stop>
                  <div style="margin-bottom: 8px">{{ item.title }}</div>
                  <fileBut
                    :fileLink="item.fileLink"
                    :type="item.type"
                    style="margin-bottom: 5px; width: 100px"
                    :close="false"
                  ></fileBut>
                </div>
                <i class="el-icon-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="padding-top: 60px" v-else-if="moduleType === 'BUSINESS'">
        <div class="sum">
          <div class="dox_sum">
            <div style="display: flex; align-items: center">
              <i class="el-icon-user" style="color: blue; font-size: 26px"></i>
              <div
                style="
                  color: black;
                  font-size: 22px;
                  margin-left: 10px;
                  font-weight: 700;
                "
              >
                业务助手
              </div>
            </div>
            <div class="sum_text">快捷对接业务，助力业务工作快速产出。</div>
          </div>
          <div class="dox_tent">
            <div class="tent_title">你可以试试这样问我与我对话</div>
            <div class="tent_tabs">
              <div
                v-for="item in businessAssistantData"
                :key="item"
                @click="changeSuggest(item)"
                class="tent_tabs_item"
              >
                <span>{{ item }}</span>
                <i class="el-icon-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="padding-top: 60px" v-else-if="moduleType === 'KNOWLEDGE'">
        <div class="sum">
          <div class="dox_sum">
            <div style="display: flex; align-items: center">
              <i class="el-icon-user" style="color: blue; font-size: 26px"></i>
              <div
                style="
                  color: black;
                  font-size: 22px;
                  margin-left: 10px;
                  font-weight: 700;
                "
              >
                企业知识库
              </div>
            </div>
            <div class="sum_text">依赖企业知识库，智能回答。</div>
          </div>
          <div class="dox_tent">
            <div class="tent_title">你可以试试这样问我与我对话</div>
            <div class="tent_tabs">
              <div
                v-for="item in enterpriseKnowledgeBaseData"
                :key="item"
                @click="changeSuggest(item)"
                class="tent_tabs_item"
              >
                <span>{{ item }}</span>
                <i class="el-icon-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="padding-top: 60px" v-else-if="moduleType === 'IMG'">
        <div class="sum">
          <div class="dox_sum">
            <div style="display: flex; align-items: center">
              <i class="el-icon-user" style="color: blue; font-size: 26px"></i>
              <div
                style="
                  color: black;
                  font-size: 22px;
                  margin-left: 10px;
                  font-weight: 700;
                "
              >
                图片识别
              </div>
            </div>
            <div class="sum_text">
              分析图片，助您决策。（格式JPG/JPEG/PNG，单个最大10MB）
            </div>
          </div>
          <div class="dox_tent">
            <div class="tent_title">你可以试试这样问我与我对话</div>
            <div class="tent_tabs">
              <div
                v-for="item in pictureRecognitionData"
                :key="item.title"
                @click="changeSuggestFile(item)"
                class="tent_tabs_item"
              >
                <div @click.stop>
                  <div style="margin-bottom: 8px">{{ item.title }}</div>
                  <fileBut
                    :fileLink="item.fileLink"
                    :type="item.type"
                    style="margin-bottom: 5px; width: 100px"
                    :close="false"
                  ></fileBut>
                </div>
                <i class="el-icon-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- 对话区域 -->
    <div v-for="(item, index) in chatDataItem" :key="index" class="list_item">
      <div v-if="item.whomType == 'ai'" class="ai">
        <div v-if="item.responseMsgType === 'MARKDOWN'" class="ai_item">
          <vue-markdown
            class="ai_item_tent"
            :source="item.response"
          ></vue-markdown>
          <div
            v-if="
              !loading && moduleType === 'KNOWLEDGE' && item.knowledgeReferences
            "
          >
            <div
              class="ai_tabs"
              style="
                margin-bottom: 8px;
                display: block;
                width: 90px;
                text-align: center;
              "
            >
              <div @click="repository(item)" class="tabs_item btn">
                <!-- <i class="el-icon-copy-document"></i> -->
                <span style="padding-left: 2px">应用知识库</span>
              </div>
            </div>
          </div>
          <div v-show="!loading" style="height: 26px">
            <div class="ai_tabs">
              <div @click="copyText(item.response)" class="tabs_item btn">
                <i class="el-icon-copy-document"></i>
                <span style="padding-left: 2px">复制</span>
              </div>
              <i @click="elseText" class="el-icon-more hover"></i>
            </div>
          </div>
        </div>
        <div v-else-if="item.responseMsgType === 'OWN_WEB_URL'" class="ai_item">
          <fileBut
            :fileLink="item.response"
            :type="item.responseMsgType"
            style="margin-bottom: 5px"
            :close="false"
          ></fileBut>
        </div>
        <div
          v-else-if="item.responseMsgType === 'OWN_FILE_URL'"
          class="ai_item"
        >
          <fileBut
            :type="item.responseMsgType"
            :filePath="item.response"
            :fileName="item.responseMsgName"
            style="margin-bottom: 5px"
            :close="false"
          ></fileBut>
        </div>
      </div>
      <div class="whom_type" v-else>
        <div class="item_style">
          <fileBut
            :filePath="item.filePath"
            :fileName="item.fileName"
            :fileLink="item.fileLink"
            :type="item.fileUploadType"
            style="margin-bottom: 5px"
            :close="false"
            v-if="item.fileUploadType"
          ></fileBut>
          <div class="item_tent">
            {{ item.query }}
          </div>
        </div>
      </div>
    </div>
    <!-- 下一步建议 -->
    <div
      v-if="
        !loading &&
        chatDataItem.length &&
        (moduleType === 'CHAT' || moduleType === 'KNOWLEDGE')
      "
    >
      <div v-if="!suggestLoading" class="suggest">
        <div>
          <div
            v-for="(item, index) in chatSuggestList"
            @click="changeSuggest(item)"
            :key="index"
            class="suggest_item animate__animated animate__flipInX hover"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div v-else>
        <div class="skeleton-content">
          <div class="skeleton-item"></div>
          <div class="skeleton-item"></div>
          <div class="skeleton-item"></div>
          <div class="skeleton-item"></div>
        </div>
      </div>
    </div>
    <div v-show="loading" class="loading">
      <span></span>
      <span></span>
      <span></span>
    </div>

    <!-- style="margin-top: 30vh;" -->
    <el-dialog
      title="应用知识库"
      append-to-body
      :visible.sync="repositoryShow"
      width="600px"
    >
      <!-- {{ knowledgeReferences }} -->
      <div
        @click="repositorySkip(item)"
        v-for="item in knowledgeReferences"
        :key="item.segmentId"
        class="dialog_class"
      >
        <!-- <div>问答类型：{{ item === 'QA' ? '问答' : '文本' }}</div> -->
        <div>
          <span style="font-weight: 700">{{ item.segmentContentQuestion }}</span
          >：{{ item.segmentContentAnswer }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>

<script>
import fileBut from "../Operation/fileBut.vue";
import VueMarkdown from "vue-markdown";
export default {
  components: {
    VueMarkdown,
    fileBut,
  },
  computed: {
    // 下一步建议loading
    suggestLoading() {
      return this.$store.state.aiChat.suggestLoading;
    },
    // type list
    functionData() {
      return this.$store.state.aiChat.functionData;
    },
    // 设备
    widthSizeType() {
      return this.$store.state.aiChat.widthSizeType;
    },
    // 加载
    loading() {
      return this.$store.state.aiChat.loading;
    },
    // 加载
    homeLoading() {
      return this.$store.state.aiChat.homeLoading;
    },
    // 模块 类型
    moduleType() {
      return this.$store.state.aiChat.moduleType;
    },
    // 对话id
    contextId() {
      return this.$store.state.aiChat.contextId;
    },
    // 对话纪录
    chatDataItem() {
      return this.$store.state.aiChat.chatDataItem;
    },
    // 下一步建议
    chatSuggestList() {
      return this.$store.state.aiChat.chatSuggestList;
    },
    textName() {
      return this.textHint[Math.floor(Math.random() * this.textHint.length)];
    },
  },
  data() {
    return {
      repositoryShow: false,
      knowledgeReferences: [],
      businessAssistantData: [
        "2024年高风险周报下载",
        "2024年高风险月报打开",
        "2024年高风险周报查询",
      ],
      enterpriseKnowledgeBaseData: [
        "如何保证脚手架安全搭建？",
        "如何进行电厂安全事故的调查和处理？",
        "紧急情况的应急预案是什么？",
        "消防安全措施有哪些？",
      ],
      documentSummaryData: [
        {
          title: "分析总结文档",
          type: "LINK",
          fileLink:
            "http://39.99.131.23:8110/20240621/%E4%B8%AD%E8%BF%9C%E6%B4%8B%E8%A7%84%E7%AB%A0%E5%88%B6%E5%BA%A6%E6%8C%87%E5%BC%95.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20240821%2F%2Fs3%2Faws4_request&X-Amz-Date=20240821T080202Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=ef784af84e1f7a7814008a28faa851b77bc5d608b70e7c33e4416d764baf1d59",
        },
      ],
      pictureRecognitionData: [
        {
          title: "图片中有几个工人",
          type: "LINK",
          fileLink:
            "http://39.99.131.23:8110/20240621/%E4%B8%AD%E8%BF%9C%E6%B4%8B%E8%A7%84%E7%AB%A0%E5%88%B6%E5%BA%A6%E6%8C%87%E5%BC%95.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20240821%2F%2Fs3%2Faws4_request&X-Amz-Date=20240821T080202Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=ef784af84e1f7a7814008a28faa851b77bc5d608b70e7c33e4416d764baf1d59",
        },
      ],
      clipboard: "",
      textHint: [
        "请随时提问或输入您想写的内容，我将立即为您提供解答与帮助，或者您可以选择以下选项。",
        "Ctrl+K快速快速获取对话输入框焦点。",
        "可以选择以下功能与我对话。",
      ],
    };
  },
  methods: {
    repositorySkip(row) {
      this.repositoryShow = false;
      this.$router.push({
        path: `/index/details/fragment`,
        query: {
          knowledgeName: row.knowledgeName,
          datasetName: row.datasetName,
          datasetType: row.datasetType,
          datasetId: row.datasetId,
          knowledgeId: row.knowledgeId,
        },
      });
      this.$store.dispatch("aiChat/changeAideIA", false);
    },
    changeSuggestFile(row) {
      let params = {
        fileLink: row.fileLink,
        fileUploadType: row.type,
        value: row.title,
      };
      this.$emit("submit", params);
    },
    // 点击 下一步建议
    changeSuggest(name) {
      let params = {
        value: name,
      };
      this.$emit("submit", params);
    },
    // 功能类型
    funCut(row) {
      if (this.widthSizeType === "min") {
        this.$store.dispatch("aiChat/setStatus", false);
      }
      this.$store.dispatch("aiChat/setModuleType", row.type);
      this.$store.dispatch("aiChat/setContextId", "");
      this.$emit("changeChat", "");
    },
    repository(row) {
      // [ { "sort": null, "knowledgeId": "b98616604241e5de305d14c5703a981b", "knowledgeName": "企业规章制度", "datasetId": "b98616604241e5de305d14c5703a981b", "datasetName": "风险源-安全技术措施", "datasetType": "QA", "segmentId": "cacd73dc3ee786c3ffa80b61ac2f496f", "segmentContentQuestion": "脚手架搭拆", "segmentContentAnswer": "由具备资质的专业人员搭设，戴好安全帽、系好安全带、穿好防滑鞋，验收脚手架；拆除区域设置隔离带，设警示标识及专人监护，恶劣天气不准进行拆除作业，不准数层同时交叉作业。", "score": null, "hitCount": null }, { "sort": null, "knowledgeId": "b98616604241e5de305d14c5703a981b", "knowledgeName": "企业规章制度", "datasetId": "b98616604241e5de305d14c5703a981b", "datasetName": "承包商违章", "datasetType": "QA", "segmentId": "662bb50d8406cbdeb1872ce719cf6fbe", "segmentContentQuestion": "脚手架接头在同一跨内", "segmentContentAnswer": "违反：《国家能源集团发电企业脚手架管理安全监察手册》脚手架 搭设平 6.5 纵向水平杆2） 两根相邻纵向水平杆的接头不应在同步或同跨内；不同步或不同跨两个相邻接头在水平方向错开的距离不应小于 50cm。违反：《脚手架作业管理制度》（GL-02-06-03）附件4脚手架管理标准9.1.立杆对接扣件应交错布置，相邻立杆的接头不应设在同步内，同步内隔一根立杆的两根相隔接头错开的距离应大于500mm；各接头中心至主节点的距离不宜大于步距的1/3；2.纵向水平杆可采用对接或搭接。对接扣件应交错布置，不宜设在同步（跨）内，不同步（跨）相邻接头错开距离应大于纵距的1/3", "score": null, "hitCount": null } ]
      this.knowledgeReferences = row.knowledgeReferences;
      this.repositoryShow = true;
    },
    copyText(text) {
      // const text = "这是要复制的文本";
      const input = document.createElement("input");
      input.value = text;
      document.body.appendChild(input);
      input.select();
      document.execCommand("copy");
      document.body.removeChild(input);

      this.$notify({
        message: "复制成功",
        type: "success",
      });
    },
    elseText() {
      this.$notify({
        message: "其他功能",
        type: "info",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home_tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .home_tabs_item {
    &:hover {
      transform: scale(1.05);
      box-shadow: 4px 4px 8px rgba(61, 155, 243, 0.13);
    }
    cursor: pointer;
    transition: 0.1s;
    background: linear-gradient(#93bcff 0%, #ebf6ff 68%, #fff 100%);
    border-radius: 16px 16px 16px 16px;
    margin: 5px;
    height: 160px;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #f1f1f1;
    .item_icon {
      padding: 7px;
      border-radius: 50%;
      font-size: 16px;
      color: #4f8df4;
      background-color: #fff;
    }
    .item_name {
      color: black;
      font-weight: 600;
      font-size: 18px;
      margin: 7px 0;
    }
    .item_content {
      word-wrap: break-word; //自动换行
      word-break: break-all; //自动换行（兼容字母）
      overflow: hidden; //超出隐藏
      text-overflow: ellipsis; //溢出显示省略号
      display: -webkit-box;
      -webkit-line-clamp: 3; //显示3行
      -webkit-box-orient: vertical;
      height: 62px;
      color: rgba(0, 0, 0, 0.3);
      font-size: 14px;
      margin-top: 5px;
    }
  }
}
.list_item {
  padding-top: 20px;
  margin: 0 10px;
  .ai {
    display: flex;
    .ai_item {
      display: flex;
      flex-direction: column;
      border-radius: 10px;
      transition: 0.1s;
      .ai_item_tent {
        background-color: #fff;
        border-radius: 10px;
        padding: 0px 10px;
        margin-bottom: 8px;
      }
      &:hover {
        .ai_tabs {
          display: flex;
        }
      }
      .ai_tabs {
        align-items: center;
        display: none;
        .tabs_item {
          font-size: 12px;
          border-radius: 7px;
          color: #8f8f8f;
          padding: 5px 10px;
          background-color: #ffffff;
          transition: 0.1s;
          cursor: pointer;
          &:hover {
            background-color: #f8f8f8;
          }
        }
        .el-icon-more {
          margin-left: 10px;
          color: #8f8f8f;
        }
      }
    }
  }
  .whom_type {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    transition: 0.1s;
    .item_style {
      border-radius: 10px;
      padding: 8px 10px;
      background: #c6dcff;
      width: 100%;
      &:hover {
        background: #c9daf7;
      }
      .item_tent {
        word-wrap: break-word;
        word-break: normal;
      }
    }
  }
}
.loading {
  width: 150px;
  height: 8px;
  margin: 0px 10px 10px 15px;
}
.loading span {
  display: inline-block;
  width: 8px;
  height: 100%;
  margin-right: 5px;
  border-radius: 50%;
  background: rgb(61, 61, 61);
  -webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child {
  margin-right: 0px;
}
@-webkit-keyframes load {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.loading span:nth-child(1) {
  -webkit-animation-delay: 0.13s;
}
.loading span:nth-child(2) {
  -webkit-animation-delay: 0.26s;
}
.loading span:nth-child(3) {
  -webkit-animation-delay: 0.39s;
}

.suggest {
  padding: 10px;
  display: flex;
  .suggest_item {
    padding: 5px 10px;
    color: #fff;
    margin-bottom: 7px;
    background: linear-gradient(90deg, #609cff 0%, #0052d9 100%);
    border-radius: 8px;
  }
}
// 骨架屏
.skeleton-content {
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
  .skeleton-item {
    width: 90%;
    border-radius: 8px;
    height: 25px;
    background: linear-gradient(90deg, #609cff 0%, #0052d9 100%);
    margin: 6px 10px;
    animation: pulse 2s ease-in-out infinite;
  }
}

@keyframes pulse {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.4;
  }
}
.sum {
  background: linear-gradient(180deg, #d7eaff 100%);
  padding: 15px 40px 15px;
  border-radius: 16px 16px 16px 16px;
  .dox_sum {
    border-bottom: 1px solid #ccc;
    .sum_text {
      margin-top: 8px;
      margin-bottom: 15px;
    }
  }
  .dox_tent {
    .tent_title {
      margin: 15px 0;
    }
    .tent_tabs {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-around;
      .tent_tabs_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        width: 77%;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 10px;
        margin-right: 10px;
        transition: 0.2s;
        cursor: pointer;
        &:hover {
          transform: scale(1.02);
        }
      }
    }
  }
}
.dialog_class {
  margin: 5px 0;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 10px;
  padding: 10px;
  &:hover {
    background-color: #eeeeee;
  }
}
::v-deep .el-dialog__body {
  padding: 0 10px;
}
</style>
<style>
.table {
  border-collapse: collapse;
  text-align: left;
  margin: 15px 5px;
}
.table td,
.table th {
  border: 1px solid #ddd;
  padding: 8px;
}
.table tr:nth-of-type(even) {
  background-color: #f2f2f2;
}
.table th {
  background-color: #aaaaaa;
  color: white;
}
</style>
